<template>
	<app-layout>
		<view class="app-pt-index">
			<!-- 搜索 -->

			<view>
				<app-search-for :value="value"></app-search-for>
			</view>

			<view class="banner" v-if="banners.length !== 0">
				<swiper class="app-banner" autoplay interval="2000" circular easing-function="easeInOutCubic">
					<swiper-item v-for="(item, k) in banners" :key="k">
						<app-jump-button @btclick="click(item)" form :item="item" :params="item.params"
							:url="`${item.page_url}`">
							<image class="app-image" :src="item.pic_url" lazy-load></image>
						</app-jump-button>
					</swiper-item>
				</swiper>
			</view>

			<!-- <view class="" @click="jump('/plugins/pt/hisgoods/hisgoods')">
				lishi
			</view> -->

			<view class="image-ad" v-if="setting.is_advertisement == 1">
				<app-image-ad :list="setting.advertisement.list" :imageStyle="imageStyle"></app-image-ad>
			</view>
			<view class="app-list safe-area-inset-bottom" v-if="goods_list.length>0">
				<app-product-list :themeObject="themeObject" :list="goods_list"></app-product-list>
			</view>
			<view class="nopt" v-else>
				等待，有惊喜哦
			</view>
			<!-- 返回顶部 -->
			<view class="quick-box dir-top-nowrap" style="bottom: 180rpx" v-if="opacity == 1">
				<image @click="backTop" class="quick-btn" src="../../../static/image/icon/back-top.png"></image>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appSearchFor from '../../../components/page-component/app-search-for/app-search-for.vue';
	import appImageAd from '../../../components/page-component/app-image-ad/app-image-ad.vue';
	import appProductList from '../components/app-product-list.vue';

	import {
		mapState
	} from "vuex";

	export default {
		name: 'index',
		data() {
			return {
				value: {
					background: `#f7f7f7`,
					color: '#f7f7f7',
					placeholder: '搜索',
					radius: 28,
					textColor: '#c0c0c0',
					textPosition: `center`,
					shadow: `0 16rpx 32rpx rgba(0, 0, 0, 0.1);`
				},
				banners: [],
				setting: {},
				nav_list: [],
				page: 1,
				page_count: 1,
				goods_list: [],
				cat_id: 0,
				imageStyle: 0,
				title: '',
				mch_id: 0,
				// 返回顶部
				top: 400,
				scrollTop: 0,
				opacity: 0
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.title,
			});
		},
		onLoad(option) {
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			// console.log(option);
			option.cat_id && (this.cat_id = option.cat_id);
			if (option.mch_id) {
				this.mch_id = option.mch_id
			}
			this.title = option.title;
			this.requestSetting();
			// this.requestCats(option.cat_id);
		},
		onShow() {
			this.page = 1
			this.requestList(0)
		},
		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++;
				this.requestList(1);
			}
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			click(item) {
				// console.log(item);
				if (item.page_url == 'javascript:;' || item.page_url == '/') {
					this.$emit('btclick', item)
					return;
				} else if (item.page_url.indexOf('/plugins/mch/goodslist/goodslist') != -1) {
					// item.page_url = item.page_url + '&mch_id=' + this.mch_id + '&store_id=' + this.store_id + '&title=' + item.name
					if (item.page_url.indexOf('?') == -1) {
						item.page_url = item.page_url + '?mch_id=' + this.mch_id + '&store_id=' + this.store_id +
							'&title=' + item
							.name
					} else {
						item.page_url = item.page_url + '&mch_id=' + this.mch_id + '&store_id=' + this.store_id +
							'&title=' + item
							.name
					}
					uni.navigateTo({
						url: item.page_url
					})
					// this.$emit('boqlist', item)
					return;
				} else if (item.page_url.indexOf('/plugins/pt/index/index') != -1 || item.page_url.indexOf(
						'/pages/goods/list') != -
					1) {
					if (item.params.kefu_url != undefined) {
						this.$storage.setStorageSync('KEFU', item.params.kefu_url)
					} else {
						this.$storage.removeStorageSync('KEFU')
					}
					if (item.page_url.indexOf('?') == -1) {
						item.page_url = item.page_url + '?title=' + item.name
					} else {
						item.page_url = item.page_url + '&title=' + item.name
					}

					uni.navigateTo({
						url: item.page_url
					})
					return;
				} else {
					uni.navigateTo({
						url: item.page_url
					})
				}
			},
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			async changeStatus(id) {
				this.cat_id = id;
				this.page = 1;
				this.goods_list = [];
				this.requestList(0);
			},
			async requestList(status) {
				this.$showLoading();
				const r = await this.$request({
					url: this.$api.pt.goods,
					data: {
						page: this.page,
						cat_id: this.cat_id,
						typemch_id: this.mch_id
					}
				});
				// console.log(r);
				if (r.code === 0) {
					this.$hideLoading();
					let {
						pagination,
						list
					} = r.data;
					this.goods_list = 1 === status ? this.goods_list.concat(list) : list;
					this.page_count = pagination.page_count;
				} else {
					this.$hideLoading();
				}
			},
			requestSetting() {
				this.$request({
					url: this.$api.pt.index
				}).then(e => {
					// console.log(e);
					if (e.code === 0) {
						this.banners = e.data.banners;
						this.setting = e.data.setting;
						let ad = e.data.setting.advertisement;
						let list = [];
						for (let i = 0, len = ad.list.length; i < len; i++) {
							let item = ad.list[i];
							item.link = {
								value: item.link_url,
								open_type: item.open_type
							}
							list.push(item);
						}
						this.setting.advertisement.list = list;
						this.imageStyle = Number(ad.style);
					}
				});
			},
			requestCats(cat_id) {
				this.$request({
					url: this.$api.pt.cats
				}).then(res => {
					// console.log(res);
					if (res.code === 0) {
						this.nav_list = this.nav_list.concat(res.data.list);
						// console.log(this.nav_list);
						!cat_id && (this.cat_id = this.nav_list[0].id);
						this.requestList(0);
					}
				});
			}
		},
		computed: {
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
			...mapState({
				themeObject: function(state) {
					let theme = state.mallConfig.mall.setting.theme_color;
					return {
						back: theme + '-m-back ' + theme,
						theme: theme,
						color: theme + '-m-text ' + theme,
						sBack: theme + '-s-back ' + theme
					}
				}
			})
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			},
		},
		components: {
			'app-image-ad': appImageAd,
			'app-product-list': appProductList,
			appSearchFor,
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/plugins/pt/index/index',
				title: '双商品拼团' /* this.title */ ,
				params: {
					cat_id: this.cat_id,
					mch_id: this.mch_id,
					title: this.title
				}
			});
		},
		// #ifdef MP-WEIXIN
		onShareTimeline() {
			return this.$shareTimeline({
				title: '双商品拼团' /* this.title */ ,
				query: {
					cat_id: this.cat_id,
					mch_id: this.mch_id,
					title: this.title
				}
			});
		},
		// #endif
	}
</script>

<style scoped lang="scss">
	.app-pt-index {
		background-color: #f7f7f7;
		min-height: 100vh;

		.index-nav {
			width: #{750rpx};
			height: #{92rpx};
		}

		.banner {
			margin-bottom: 36rpx;
			margin-top: 24rpx;
		}

		.app-list {
			margin-top: #{20rpx};
		}

	}

	.app-banner {
		height: #{264rpx};
		width: #{750rpx};

		.app-image {
			height: #{264rpx};
			width: #{750rpx};
		}
	}

	.app-index-nav {
		height: #{92rpx};
		background-color: white;
		width: #{750rpx};
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;

		.app-search {
			width: #{108rpx};
			height: #{92rpx};

			.app-icon {
				width: #{60rpx};
				height: #{60rpx};
				background-image: url("../image/big-sarch.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}

		.app-line {
			width: #{1rpx};
			height: #{40rpx};
			background-color: #e2e2e2;
		}

		.app-scroll {
			width: #{641rpx};
			height: #{92rpx};
			white-space: nowrap;

			.app-item {
				display: inline-block;
				font-size: #{28rpx};
				color: #666666;
				padding: 0 #{24rpx};
				box-sizing: border-box;
				height: #{56rpx};
				line-height: #{56rpx};
				border-radius: #{28rpx};
				margin: #{18rpx} #{32rpx};
			}

			.app-active-item {
				color: white;
			}

			.default-item {
				background: linear-gradient(140deg, #ffa360, #ff5c5c);
			}
		}
	}

	.nopt {
		text-align: center;
		line-height: 476rpx;
		font-size: 36rpx;
	}

	// 返回顶部
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}
</style>
